<template>
    <div v-loading="loading">
        <el-table
            :data="treeProps?treeData:pageData.records"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            @sort-change="handleSortChange"
            :height="height"
            :row-key="treeProps?'id':null"
            size="small"
            :default-expand-all="false"
            :row-class-name="rowClassName"
            :expand-row-keys="treeProps?expandRowKeys:null"
            @expand-change="onExpandChange"
        >
            <slot></slot>
        </el-table>
        <el-pagination
            v-if="!treeProps"
            :layout="`total, ${sizeSel?'sizes,':''}prev, ${pageNum?'pager,':''}next, jumper`"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            :total="pageData.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</template>

<script>
export default {
    props: {
        treeProps: Object,
        queryCallback: Function,
        handleSortChange: {
            type: Function,
            default: () => { }
        },
        onExpandChange: {
            type: Function,
            default: () => {}
        },
        handleSelectionChange: {
            type: Function,
            default: () => { }
        },
        height: String,
        size: {
            type: Number,
            default: 10,
        },
        rowClassName: Function,
        sizeSel: {
            type: Boolean,
            default: () => true,
        },
        pageNum: {
            type: Boolean,
            default: () => true,
        },
        expandRowKeys: {
            type: Array,
            default: () => [],
        }
    },
    created() {
        if (this.treeProps) {
            this.queryTreeData()
        } else {
            this.findPage()
        }
    },
    data() {
        return {
            pageSize: this.size,
            currentPage: 1,
            pageData: {},
            loading: false,
            treeData: [],
        }
    },
    methods: {
        handleSizeChange(val) {
            this.pageSize = val
            this.currentPage = 1
            this.findPage()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.findPage()
        },
        queryTreeData() {
            this.loading = true
            let promise = this.queryCallback()
            if (promise) {
                promise.then(data => {
                    this.treeData = data
                    this.loading = false
                }).catch(err => {
                    this.loading = false
                    this.$message.error(err.message)
                })
            } else {
                this.loading = false
            }
        },
        findPage() {
            this.loading = true
            let promise = this.queryCallback({
                current: this.currentPage,
                size: this.pageSize
            })
            if (promise) {
                promise.then(data => {
                    this.pageData = data
                    this.loading = false
                }).catch(err => {
                    this.loading = false
                    this.$message.error(err.message)
                })
            } else {
                this.loading = false
            }
        },
        refresh(type = 1) { // 1-add 回到第一页 2-edit 当前页 3-del 当前页或回到上一页
            if (this.treeProps) {
                this.queryTreeData()
            } else {
                if (type == 1) {
                    this.currentPage = 1
                } else if (type == 3) {
                    if ((this.pageData.total - 1) % this.pageSize == 0 && this.currentPage > 1) {
                        this.currentPage = this.currentPage - 1
                    }
                }
                this.findPage()
            }
        },
        remove(id) {
            let item = this.findParentItem(this.treeData, id)
            if (item) {
                item.splice(item.findIndex(e => e.id == id), 1)
                return true
            }
            return false
        },
        append(data, id) {
            let item = this.findItem(this.treeData, id)
            if (item) {
                if (!item.children) {
                    item.children = []
                }
                item.children.push(data)
                return true
            }
            return false
        },
        update(data) {
            let item = this.findItem(this.treeData, data.id)
            if (item) {
                for (let key in data) {
                    if (key != 'children') {
                        item[key] = data[key]
                    }
                }
                return true
            }
            return false
        },
        findItem(arr, id) {
            if (arr) {
                for (let index = 0; index < arr.length; index++) {
                    const element = arr[index]
                    if (element.id === id) {
                        return element
                    }
                    let ret = this.findItem(element.children, id)
                    if (ret) {
                        return ret
                    }
                }
            }
            return null
        },
        findParentItem(arr, id) {
            if (arr) {
                for (let index = 0; index < arr.length; index++) {
                    const element = arr[index]
                    if (element.id === id) {
                        return arr
                    }
                    let ret = this.findParentItem(element.children, id)
                    if (ret) {
                        return ret
                    }
                }
            }
            return null
        }
    }
}
</script>

<style>
.el-table-column--selection .cell {
    padding-left: 14px !important;
    padding-right: 14px;
}
</style>
